<template>
    <div class="box">
        <img :src="item.url[0]" alt="" class="header-img">
        <div class="content">
            <div class="content-map">
                <div class="content-map-name">{{ item.name }}</div>
                <div class="content-map-tag">
                    <span v-for="item in item.label" :key="item">{{ item }}</span>
                </div>
                <div class="content-map-footer">
                    <div class="time"><img src="../assets/time.png" alt=""><span>{{ item.businessHours }}</span></div>
                    <div class="address"><img src="../assets/address.png" alt="">{{ item.address }}</div>
                </div>
            </div>
            <div class="content-text">
                <div class="content-text-title"><span>店铺详情</span></div>
                <div class="content-text-html" v-html="item.content"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 导入当前路由api
import { useRoute } from 'vue-router';
import data from '../data';
// 实例化当前路由
const route = useRoute()
// 获取路由传参
const id = route.query?.id
// 根据id获取点击对象
const item = data.find(i => i.id == id)
console.log(id, data, 'id')
console.log(item, 'item')
</script>

<style scoped lang="scss">
.box {
    .header-img {
        width: 100%;
       mask-image: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    }
    
    .content {
        padding: 9px 16px;
        margin-top: -332px;
        position: relative;

        >div {
            border-radius: 10px;
            background-color: #fff;
        }

        >div:first-child {
            margin-bottom: 10px;
        }

        .content-map {
            padding: 14px 10px;

            .content-map-name {
                font-size: 20px;
                font-weight: bold;
            }

            .content-map-tag {
                margin-top: 6px;

                span {
                    background-color: #ededed;
                    font-size: 12px;
                    margin-right: 6px;
                }
            }

            .content-map-footer {
                height: 100px;
                background: url(http://wddxwdc.tffcs.com/image/dxkfr/whxd/map.png) no-repeat center/cover;
                padding: 25px 20px;
                margin-top: 10px;

                img {
                    margin-right: 6px;
                }
            }
        }

        .content-text {
            padding: 26px 0;

            .content-text-title {
                display: flex;
                justify-content: center;
                margin-bottom: 20px;

                span {
                    padding: 6px 26px;
                    background: linear-gradient(180deg, #ffedd1 0%, rgba(255, 255, 255, 0) 100%);
                    color: #784e23;
                    font-weight: bold;
                    border-radius: 5px;
                }
            }

            :deep(p) {
                color: #784e23;
            }
        }
    }
}
</style>